<template>
	<div class="container">
		<!-- 面包屑 -->
		<div class="bread-container">
			<el-breadcrumb separator=">">
				<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item :to="{ name: 'category', params: { id: subCategoryData.parentId } }">
					{{ subCategoryData.parentName }}
				</el-breadcrumb-item>
				<el-breadcrumb-item>{{ subCategoryData.name }}</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="sub-container">
			<el-tabs v-model="params.sortField" @tab-change="handlerTabChange">
				<el-tab-pane label="最新商品" name="publishTime"></el-tab-pane>
				<el-tab-pane label="最高人气" name="orderNum"></el-tab-pane>
				<el-tab-pane label="评论最多" name="evaluateNum"></el-tab-pane>
			</el-tabs>
			<div class="body" v-infinite-scroll="handlerLoadMore" :infinite-scroll-disabled="isDisabledLoad">
				<!-- 商品列表-->
				<GoodsItem v-for="goods in subCategoryGoodsList" :key="goods.id" :goods="goods" :id="goods.id"></GoodsItem>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'SubCategory',
	}
</script>

<script setup>
	import { ref, onMounted } from 'vue'
	import { useRoute } from 'vue-router'
	import { reqSubCategoryFilterData, reqSubCategoryGoodsData } from '@/apis/subCategory'
	import GoodsItem from '@/views/Home/components/HomeGoodsItem.vue'

	const route = useRoute()
	const subCategoryData = ref({})
	const subCategoryGoodsList = ref([])
	// 获取二级分类商品数据参数
	const params = ref({
		categoryId: route.params.id,
		page: 1,
		pageSize: 20,
		sortField: 'publishTime',
	})
	// 加载更多功能是否禁用
	let isDisabledLoad = ref(false)

	async function getSubCategoryData() {
		try {
			const res = await reqSubCategoryFilterData(route.params.id)
			subCategoryData.value = res.result
		} catch (error) {
			ElMessage({
				type: 'error',
				message: error.response?.data?.error,
			})
		}
	}
	// 获取二级分类商品数据
	async function getSubCategoryGoodsData() {
		try {
			const res = await reqSubCategoryGoodsData(params.value)
			subCategoryGoodsList.value = res.result.items
		} catch (error) {
			ElMessage({
				type: 'error',
				message: error.response?.data?.error,
			})
		}
	}
	// tab切换
	function handlerTabChange() {
		params.value.page = 1
		getSubCategoryGoodsData()
	}
	// 滚动到底部是触发
	async function handlerLoadMore() {
		// 页码加1
		params.value.page++
		const res = await reqSubCategoryGoodsData(params.value)
		subCategoryGoodsList.value = subCategoryGoodsList.value.concat(res.result.items)
		if (!res.result.items.length) {
			isDisabledLoad.value = true
			ElMessage({
				type: 'warning',
				message: '没有更多数据了',
			})
		}
	}

	onMounted(() => {
		getSubCategoryData()
		getSubCategoryGoodsData()
	})
</script>

<style lang="scss" scoped>
	.bread-container {
		padding: 25px 0;
		color: #666;
	}

	.sub-container {
		padding: 20px 10px;
		background-color: #fff;

		.body {
			display: flex;
			flex-wrap: wrap;
			padding: 0 10px;
		}

		.goods-item {
			display: block;
			width: 220px;
			margin-right: 20px;
			padding: 20px 30px;
			text-align: center;

			img {
				width: 160px;
				height: 160px;
			}

			p {
				padding-top: 10px;
			}

			.name {
				font-size: 16px;
			}

			.desc {
				color: #999;
				height: 29px;
			}

			.price {
				color: $priceColor;
				font-size: 20px;
			}
		}

		.pagination-container {
			margin-top: 20px;
			display: flex;
			justify-content: center;
		}
	}
</style>
